<template>
  <section class="one">
    <p>我是2号</p>
    <ul>
      <li v-for="(product, index) of products" :key="index">
        <p>{{product.name}}</p>
        <span>{{product.price}}</span>
      </li>
    </ul>
  </section>
</template>

<script>
export default {
  name: 'ProductTwo',
  props: {
    products: Array
  }
}
</script>

<style lang="stylus" scoped>
  .one
    margin-bottom 30px
    padding: 10px 20px
    background lemonchiffon
    ul
      padding 0
      list-style none
      display flex
      width 100%
      text-align center
      li
        width 25%
        margin-right 10px
        margin-top 10px
        padding 20px
        background-color: #D1E4FF
        font-size 35px
        .price
          font-weight 600
          color #860CEB
          display block
</style>
